<!--发起聚会-图文-->
<template>
  <f7-page no-toolbar>
    <f7-navbar title="图文描述" back-link="Back">
    </f7-navbar>

        <div class="">
          <vue-html5-editor :content="content" :height="400"
                            @change="updateData"></vue-html5-editor>

        </div>

        <f7-toolbar bottom>
          <f7-button style="color: white;width: 100%;margin: auto 5%;" class="col button button-fill button-round">保存</f7-button>
          <f7-button href="/activity/actDetailPre/" style="color: white;width: 100%;margin: auto 5%;" class="col bg-color-green button button-fill button-round">预览去发起</f7-button>
        </f7-toolbar>

  </f7-page>
</template>

<script>
  import labelListEdit from '../../components/labelListEdit.vue';

  // import js12 from '../../common/eleditor/jquery.min.js'
  // import js123 from '../../common/eleditor/webuploader.min.js'
  // import js1 from '../../common/eleditor/Eleditor.min.js'

  /*  /!*实例化一个编辑器*!/
    var artEditor = new Eleditor({
      el: '#article-body',
      upload:{
        server: '/upload.php',
        fileSizeLimit: 2
      }
    });*/


  export default {
    components: {labelListEdit},
    data() {
      return {
        swiperParams: {
          // speed: 500,
          loop: true,
          // height:600,
          // autoplay: {
          //   delay: 1500,
          // },
          direction:'vertical'
          // preventLinksPropagation: false   // 阻止点击事件冒泡
        },
        content:"请输入图文描述"
      };
    },
    methods: {
      refresh(event, done) {
        setTimeout(() => {
          // todo
          done();
        }, 1000);
      },
      updateData(e = "") {
        let c1 = e.replace(/<img width="100%"/g, "<img");
        let c2 = c1.replace(/<img/g, '<img width="100%"');
        this.content = c2;
        console.log(this.content);

      }
    }
  }
</script>

<style scoped>
  #article-body{
    width: 100%;
    min-height: 300px;
    box-sizing: border-box;
    padding: 10px;
    color: #444;
  }
</style>
